<template>
  <a-modal :title="'打印'" :visible="true" width="800px" height="400px" :footer="null" @cancel="reset">
    <a-button type="primary" style="position: absolute;right: 25px;top:60px" v-print="'#print'">打印</a-button>
    <div style="margin-top: 50px;height:400px">
      <div id="print" v-if="type == 'a'" class="background print-landscape">
        <a-row style=" display: flex;margin: auto;">
          <div class="title">编号:</div>
          <div style="font-weight: bold; font-size: 14px" class="line">{{ content.code }}</div>
        </a-row>
        <a-row style="display: flex; margin: auto">
          <div class="title">名称:</div>
          <div class="line">{{ content.name }}</div>
        </a-row>
        <a-row style="display: flex; margin: auto">
          <div class="title">材质:</div>
          <div class="line" style="width: 70px">{{ content.textureComponent }}</div>
          <div style="position: absolute; left: 103px; top: 7px">
            <Qrcode :value="content.code" :width="40" :index="0" :height="40"></Qrcode>
          </div>
        </a-row>
        <a-row style="display: flex; margin: auto">
          <div class="title">产地:</div>
          <div class="line" style="width: 70px">{{ content.placeOfOrigin }}</div>
        </a-row>
        <a-row style="display: flex; margin: auto">
          <div class="title">货期:</div>
          <div class="line">{{ content.bigGoodsCycle }}</div>
        </a-row>
        <a-row style="display: flex; margin: auto; color: #000">
          <div style="width: 65px">产品特性:</div>
          <div class="line">{{ content.specialExplain }}</div>
        </a-row>
      </div>
      <div id="print" v-if="type == 'b'" class="backgroundb print-landscape">
        <div style="width: 410px">
          <a-row style="display: flex; justify-content: space-between">
            <div style="font-weight: bold; font-size: 14px; width: 100px; line-height: 30px; color: #000">
              {{ content.code }}
            </div>
            <div class="lineb" style="width: 230px; line-height: 14px">
              {{ content.name }}
            </div>
            <div style="width: 100px; line-height: 30px; color: #000">
              产地：<span class="lineb">{{ content.placeOfOrigin }}</span>
            </div>
          </a-row>
          <a-row style="display: flex; justify-content: space-between; color: #000">
            <div style="width: 110px; color: #000">门幅段长：{{ content.widthSegmentLength }}</div>
            <div style="width: 110px; color: #000">货期：{{ content.bigGoodsCycle }}</div>
            <div style="width: 210px; color: #000">材质：{{ content.textureComponent }}</div>
          </a-row>

          <div style="width: 430px; color: #000">产品特性：{{ content.specialExplain }}</div>
        </div>
        <div style="width: 100px">
          <Qrcode :value="content.code" :width="60" :index="0" :height="60"></Qrcode>
        </div>
      </div>
      <div id="print" v-if="type == 'c'" class="backgroundc print-landscape">
        <a-row>
          <a-col :span="8">
            <a-row>
              <a-col :span="10" class="col"> 物料编号 </a-col>
              <a-col :span="14" class="col">
                {{ content.code }}
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="10" class="col"> 单价 </a-col>
              <a-col :span="14" class="col"> </a-col>
            </a-row>
          </a-col>
          <a-col :span="8">
            <a-row>
              <a-col :span="10" class="col"> 物料名称 </a-col>
              <a-col :span="14" class="col">
                {{ content.name }}
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="10" class="col"> 克重 </a-col>
              <a-col :span="14" class="col">
                {{ content.gramWeight }}
              </a-col>
            </a-row>
          </a-col>

          <a-col :span="8" style="height: 84px; border-bottom: 1px solid; display: flex; justify-content: center; align-items: center">
            <Qrcode :value="content.code" :width="75" :index="0" :height="75"></Qrcode>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-row>
              <a-col :span="10" class="col"> 缩率 </a-col>
              <a-col :span="14" class="col">
                {{ content.minification }}
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="8">
            <a-row>
              <a-col :span="10" class="col"> 门幅 </a-col>
              <a-col :span="14" class="col">
                {{ content.widthSegmentLength }}
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="8">
            <a-row>
              <a-col :span="10" class="col"> 成份 </a-col>
              <a-col :span="14" class="col" style="border-right: none">
                {{ content.textureComponent }}
              </a-col>
            </a-row>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-row>
              <a-col :span="10" class="col"> 过机温度 </a-col>
              <a-col :span="14" class="col">
                {{ content.stickLiningTemperature }}
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="8">
            <a-row>
              <a-col :span="10" class="col"> 过机时间 </a-col>
              <a-col :span="14" class="col">
                {{ content.stickLiningTime }}
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="8">
            <a-row>
              <a-col :span="10" class="col"> 过机压力 </a-col>
              <a-col :span="14" class="col" style="border-right: none">
                {{ content.stickLiningPressure }}
              </a-col>
            </a-row>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-row>
              <a-col :span="10" class="col"> 供应商 </a-col>
              <a-col :span="14" class="col">
                {{ supply }}
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="8">
            <a-row>
              <a-col :span="10" class="col"> 厂家编号 </a-col>
              <a-col :span="14" class="col">
                {{ color }}
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="8">
            <a-row>
              <a-col :span="10" class="col"> 凑卷数 </a-col>
              <a-col :span="14" class="col" style="border-right: none">
                {{ specs }}
              </a-col>
            </a-row>
          </a-col>
        </a-row>
        <a-row style="display: flex">
          <a-col style="width: 90.69px; height: 48px; border-right: 1px solid; line-height: 48px; text-align: center; color: #000"> 产品特性说明 </a-col>
          <a-col style="width: 561.31px; height: 48px; padding: 10px">
            {{ content.specialExplain }}
          </a-col>
        </a-row>
      </div>
    </div>
  </a-modal>
</template>

<script src="http://localhost:8000/CLodopfuncs.js"></script>

<script>
import Qrcode from '@/views/headquarters-coupon/components/Code.vue'

export default {
  components: {
    Qrcode
  },

  props: {
    detail: {
      type: Object,
      default: null
    },
    printType: {
      type: String,
      default: null
    },

    supplyList: {
      type: Array,
      default: null
    },

    specsList: {
      type: Array,
      default: null
    },

    colorList: {
      type: Array,
      default: null
    }
  },

  data() {
    return {
      content: {},
      type: '',
      basewidth: '',
      baseheight: '',
      supply: '',
      color: '',
      specs: ''
    }
  },

  mounted() {
    document.body.style.setProperty('--width', this.basewidth)
    document.body.style.setProperty('--height', this.baseheight)
  },

  created() {
    const { detail, printType, supplyList, specsList, colorList } = this.$props
    if (detail) {
      this.content = detail
      this.type = printType
      if (printType == 'a') {
        this.basewidth = '35mm'
        this.baseheight = '32mm'
      }

      if (printType == 'b') {
        this.basewidth = '130mm'
        this.baseheight = '13mm'
      }

      if (printType == 'c') {
        this.basewidth = '170mm'
        this.baseheight = '71mm'
      }

      if (supplyList && supplyList.length) {
        const arr = []
        supplyList.map(item => {
          arr.push(item.supplyName)
        })
        this.supply = arr.toString()
      }

      if (specsList && specsList.length) {
        const arr = []
        specsList.map(item => {
          if (item.pieceNumber || item.pieceNumber == 0) {
            arr.push(item.pieceNumber)
          }
        })

        if (arr.length) {
          this.specs = arr.toString()
        }
      }

      if (colorList && colorList.length) {
        const arr = []
        colorList.map(item => {
          if (item.manufactorColorCode) {
            arr.push(item.manufactorColorCode)
          }
        })
        if (arr.length) {
          this.color = arr.toString()
        }
      }
    }
  },

  methods: {
    reset() {
      this.$emit('closePrint')
    }
  }
}
</script>
<style>
@media print {
  @page print-landscape {
    size: landscape;
  }
}
div.print-landscape {
  page: print-landscape;
}
</style>
<style scoped>
.title {
  width: 28px;
  color: #000;
}
.line {
  margin-left: 2px;
  width: 116px;
  color: #000;
  border-bottom: 1px solid #000;
}

.lineb {
  margin-left: 2px;
  color: #000;
  border-bottom: 1px solid #000;
}

.background {
  font-size: 12px;
  width: 145px;
  color: #000;
  margin: auto;
  line-height: 16px;
  height: 110px;
  /* transform: scale(2); */
}

.backgroundb {
  font-size: 12px;
  width: 470px;
  height: 65px;
  color: #000;
  margin: auto;
  display: flex;
  justify-content: space-between;
}

.backgroundc {
  font-size: 12px;
  width: 600px;
  color: #000;
  height: 260px;
  margin: auto;
  border: 1px solid #000;
}

.col {
  text-align: center;
  height: 42px;
  line-height: 42px;
  color: #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}

@media print {
  @page {
    /*A4: 210mm × 297mm，size: 794px × 1123px，0边距*/
    /*171.9mm × 258.9mm，size：6412px × 978px，19.05mm边距（ie浏览器默认打印边距） */
    /* margin: 0; */
    /* size:  35mm 32mm; */
    /* size: var(--width) var(--height); */
  }
  .background .backgroundb .backgroundc {
    border: none !important;
  }
}
</style>
